<template>
	<van-search placeholder="请输入搜索关键词" @focus="goSearch" />
	<view class="home">
		<uni-swiper-dot class="uni-swiper-dot-box" mode="default" @clickItem="clickItem" :info="provinceList"
			:current="current" field="content" :dots-styles="dotStyle">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay circular :interval="3000">
				<swiper-item v-for="(item, index) in provinceList" :key="index">
					<view class="province-list">
						<view v-for="(i, indx) in 10" class="province-item" :key="indx">
							<view class="province-icon">icon</view>
							<view class="province-name">省份</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 特价/上新 -->
		<view class="card-wrap">
			<view class="card-recommend" v-for="(cardItem) in recommendList" :key="cardItem.title"
				@click="goDetailList(cardItem.detailUrl)">
				<view class="card-title">
					{{cardItem.title}}
				</view>
				<view class="list-product">
					<view class="item-product" v-for="(productItem) in cardItem.list" :key="productItem.id">
						<view class="item-product_icon">
							{{productItem.img}}
						</view>
						<view class="item-product_price">
							¥{{productItem.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 限时抢购 -->
		<view class="flash-sale-card">
			<view class="card-topbar">
				<view class="card-countdown">
					<text class="card-title" @click="goActivePage">限时抢购</text>
					<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#FF0000" />
				</view>
				<text class="btn-more" @click="goActivePage">更多</text>
			</view>
			<view>
				<swiper class="card-swiper-box" autoplay circular :interval="2000" :duration="2000" :display-multiple-items="3"
					easing-function="linear" @change="flashSaleSwiperChange" :current="flashSaleSwiperItem">
					<swiper-item v-for="(item, index) in 10" :key="index" class="swiper-product-item">
						<view class="product-wrap">
							<SingleBargainPrice />
						</view>
					</swiper-item>
				</swiper>

			</view>
		</view>
		<!-- 地方特色 -->
		<view class="local-hot-card">
			<view class="card-title">地方特色</view>
			<view class="product-wrap">
				<LocalHotProduct class="product-item" v-for="i in 10" :key="i" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue"

	// 搜索跳转search
	const goSearch = () => {
		uni.redirectTo({ url: "/pages/searchPage/searchPage" })
	}
	// 省份区域
	const current = ref(0)
	const swiperDotIndex = ref(0)
	const provinceList = ref([1, 2, 3])

	const dotStyle = {
		backgroundColor: "rgba(255, 90, 95,0.3)",
		border: "1px rgba(255, 90, 95,0.3) solid",
		color: "#fff",
		selectedBackgroundColor: "rgba(255, 90, 95,0.9)",
		selectedBorder: "1px rgba(255, 90, 95,0.9) solid",
		bottom: 10
	}

	const change = (e : any) => {
		current.value = e.detail.current
	}

	const clickItem = (e : any) => {
		swiperDotIndex.value = e
	}
	//商品推荐
	const recommendList = [
		{
			title: '特价推荐',
			detailUrl: '/pages/marketingActivity/bargainPrice',
			list: [
				{
					id: 1,
					img: 'imgurl',
					price: 99.33
				},
				{
					id: 2,
					img: 'imgurl',
					price: 228.66
				}
			],
		},
		{
			title: '今日上新',
			detailUrl: '/pages/marketingActivity/newlyProduct',
			list: [
				{
					id: 1,
					img: 'imgurl',
					price: 2.33
				},
				{
					id: 2,
					img: 'imgurl',
					price: 3.5
				}
			]
		},
	]
	const goDetailList = (detailUrl : string) => {
		uni.navigateTo({
			url: detailUrl
		})
	}
	// 限时抢购
	const flashSaleSwiperItem = ref(0)
	const flashSaleSwiperChange = (e : any) => {
		flashSaleSwiperItem.value = e.detail.current
	}
	const goActivePage = () => {
		uni.navigateTo({
			url: '/pages/marketingActivity/flashSale'
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		padding: 0 10px;

		.uni-swiper-dot-box {
			width: 100vw;
		}

		.swiper-box {
			height: 180px;

			.province-list {
				width: 100%;
				height: 170px;
				display: flex;
				flex-wrap: wrap;
				gap: 10px 0;

				.province-item {
					flex-shrink: 0;
					flex-basis: 20%;
					height: 70px;
					text-align: center;

					.province-icon {
						height: 40px;
						width: 40px;
						border-radius: 50%;
						border: 1px solid grey;
						margin: auto;
						// 删除
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.province-name {
						margin-top: 4px;
					}
				}
			}
		}

		.card-wrap {
			display: flex;

			.card-recommend {
				flex: 1;
				flex-shrink: 0;
				padding: 10px 0;

				.card-title {
					margin-bottom: 10px;
				}

				.list-product {
					display: flex;

					.item-product {
						flex: 1;
						flex-shrink: 0;

						.item-product_icon {
							width: 60px;
							height: 60px;
							margin: auto;
							border: 1px solid #c3c3c3;
						}

						.item-product_price {
							width: fit-content;
							margin: 10px auto 0;
							font-size: 14px;
							color: #FFF;
							padding: 2px 4px;
							border-radius: 6px;
							background-color: red;
						}
					}
				}
			}
		}

		.flash-sale-card {
			margin-top: 10px;

			.card-topbar {
				display: flex;
				justify-content: space-between;

				.card-countdown {
					display: flex;
				}
			}

			.card-swiper-box {

				.swiper-product-item {
					.product-wrap {
						padding: 10px 5px;
					}
				}
			}
		}

		.local-hot-card {
			margin-top: 10px;

			.product-wrap {
				display: grid;
				grid-gap: 20px;
				grid-template-columns: repeat(2, 1fr);

			}
		}
	}
</style>